import React, { Component } from 'react'
import { Table, Image, Space, Switch } from 'antd'
import { getProlist, updateFlag } from './../../api/pro'


class ProductList extends Component {
  state = {
    prolist: [], // 列表
    total: 0, // 总数量
    current: 1, // 默认的页数
    pageSize: 10 // 每页显示的默认个数
  }
  async componentDidMount() {
    const res = await getProlist()

    this.setState({
      prolist: res.data.data,
      total: res.data.total,
    })
  }
  columns = [
    {
      title: '序号',
      fixed: 'left',
      width: 80,
      render: (text, record, index) => {
        return (<span>{index + 1}</span>)
      }
    },
    {
      title: '商品名称',
      fixed: 'left',
      width: 300,
      dataIndex: 'proname',
      key: 'proname'
    },
    {
      title: '商品分类 - 品牌',
      width: 150,
      render: (text, record) => <span>{record.category}/{record.brand}</span>
    },
    {
      title: '商品图片',
      width: 150,
      dataIndex: 'img1',
      key: 'img1',
      render: (text, record) => <Image src={text} width={60} height={60} />
    },
    {
      title: '商品原价',
      width: 150,
      dataIndex: 'originprice',
      key: 'originprice',
      render:(text)=>{return '￥'+text}
    },
    {
      title: '商品折扣',
      width: 150,
      dataIndex: 'discount',
      key: 'discount'
    },
    {
      title: '商品销量',
      width: 150,
      dataIndex: 'sales',
      key: 'sales'
    },
    {
      title: '商品库存',
      width: 150,
      dataIndex: 'stock',
      key: 'stock'
    },
    {
      title: '上架状态',
      width: 100,
      fixed: 'right',
      dataIndex: 'issale',
      key: 'issale',
      render: (text) => {
        return <Switch checked={text * 1 === 1} disabled />
      }
    },
    {
      title: '是否推荐',
      width: 100,
      fixed: 'right',
      dataIndex: 'isrecommend',
      key: 'isrecommend',
      render: (text,record,index) => {
        return <Switch checked={text * 1 === 1}  
        onChange={(checked) => {
          this.updateisrecommendHandler(record.proid, checked)
          const arr = this.state.prolist
          arr[index].isrecommend = checked
          this.setState({
            prolist: arr
          })
        }}
        />
      }
    },
    {
      title: '是否秒杀',
      width: 100,
      fixed: 'right',
      dataIndex: 'isseckill',
      key: 'isseckill',
      render: (text, record, index) => {
        return <Switch checked={text * 1 === 1}
          onChange={(checked) => {
            this.updateisseckillHandler(record.proid, checked)
            const arr = this.state.prolist
            arr[index].isseckill = checked
            this.setState({
              prolist: arr
            })
          }}
        />
      }
    },
    {
      title: '操作',
      width: 150,
      fixed: 'right',
      render: (text, record) => {
        return (
          <Space>
            <span>编辑</span>
            <span> | </span>
            <span>删除</span>
          </Space>
        )
      }
    }
  ]
  updateisseckillHandler(proid, checked) {
    updateFlag({
      proid: proid,
      type: 'isseckill',
      flag: checked
    }).then(res => {

    })
  }
  updateisrecommendHandler(proid,checked){
    updateFlag({
      proid: proid,
      type: 'isrecommend',
      flag: checked
    }).then(res => {

    })
  }
  render() {
    return (
      <>

        <Table
          pagination={{
            position: ['bottomCenter'],
          }
          }
          dataSource={this.state.prolist}
          columns={this.columns}
          rowKey={record => record.proid}
          scroll={{ x: 1300 }}
        ></Table>
      </>
    )
  }
}

export default ProductList